import React, { useEffect, useState } from 'react'
import { Button, Form, Input, Drawer, TreeSelect, Radio, Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { getShopType, addShop } from "../apis/shop"
import MyUpload from './MyUpload';
import qs from "querystring"


export default function Addshop({getNewInf}) {

    useEffect(() => {
        fetchData()
    }, [])

    const fetchData = async () => {
        const res = await getShopType()
        settreeData(res.data.rows.children)
    }
    //新增抽屉
    // eslint-disable-next-line react-hooks/rules-of-hooks

    const [open, setOpen] = useState(false);
    const [treeData, settreeData] = useState([])
    const [imgsrc, setimgSrc] = useState()
    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };

<<<<<<< HEAD

    //新增商品

=======
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
    const onFinish = async (values) => {
        values.photo = imgsrc

        const all = qs.stringify(values)
<<<<<<< HEAD
        console.log(all);
        const res = await addShop(all)
        console.log(res);
=======
        await addShop(all)
        onClose()
        getNewInf(1)



>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };


    const [value, setValue] = useState(undefined);
    const onChange = (newValue) => {
        setValue(newValue);
    };

    const getPhoto = (a) => {
        //    console.log(a);
        setimgSrc(a)

    }
    return (
        <div>
            <Button type="primary" onClick={showDrawer}>
                新增
            </Button>
            <Drawer title="新增商品类型" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="商品名称"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品名称',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="goodsTypeId"
                        label="商品类型"
                    >
                        <TreeSelect
                            showSearch
                            style={{
                                width: '100%',
                            }}
                            value={value}
                            dropdownStyle={{
                                height: 200

                            }}
                            placeholder="Please select"
                            allowClear
                            onChange={onChange}
                            treeData={treeData}
                        />
                    </Form.Item>

                    <Form.Item
                        label="价格"
                        name="price"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品价格',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="数量"
                        name="counts"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品数量',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="服务类型"
                        name="serviceTypeId"
                        rules={[
                            {
                                required: true,
                                message: '请输入服务类型id',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label="状态" name="status">
                        <Radio.Group>
                            <Radio value="1"> 上架 </Radio>
                            <Radio value="2"> 下架 </Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item label="商品图片" valuePropName="fileList" name="photo">
                        <MyUpload getFileName={getPhoto}></MyUpload>
                    </Form.Item>


                    <Form.Item
                        wrapperCol={{
                            offset: 15,
                            span: 9,
                        }}
                    >
                        <div style={{ display: "flex", flexDirection: "row" }}>
                            <Button style={{ marginRight: "10px" }}>取消</Button>
                            <Button type="primary" htmlType="submit" style={{ marginRight: "10px" }}>
                                提交
                            </Button>
                        </div>

                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    )
}
